<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        isInline
        ref="formData"
        formItemWidth="120px"
        actionPosition="start"
        :isScalingBtn="false"
        :colNumOfRow="3.5"
        :formColumns="formItemList"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <basic-table
        showActionCol
        :loading="tableInfo.loading"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
        :pagination="pagination"
        :pageSizes="pageSizes"
        :tableHeight="480"
        :actionRender="renderTableBtnAction"
        :selectionChange="handleTableSelection"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      >
        <el-row type="flex" slot="content_context">
          <el-button
            type="primary"
            size="mini"
            :disabled="isEmptyForSelection()"
            @click="handleBatchAudit"
          >批量审核</el-button>
        </el-row>
      </basic-table>
    </el-card>
    <InputReasonDialog
      dialogTitle="批量审核"
      warningMsg="确定要批量审核这些别名吗？"
      okBtnLabel="审核通过"
      cancelBtnLabel="审核不通过"
      :visible.sync="inputReason.visible"
      :isRequired="false"
      :handleSubmit="handleSuccessedByBatchAudit"
      :handleNotSubmit="handleFailedByBatchAudit"
    />
  </div>
</template>
<script>
import { getBtnsId } from '@/libs/btnsPermission';
import { mapGetters } from 'vuex';
import BasicForm from '@/components/BasicForm';
import BasicTable from '@/components/BasicTable';
import InputReasonDialog from '@/components/InputReasonDialog';
import { requestToData, requestToStatus } from '@/api/commonHttp';
import { getListByReturnMapKey } from '@/utils/getUtils';
export default {
  components: {
    BasicForm,
    BasicTable,
    InputReasonDialog
  },
  data () {
    return {
      formItemList: [
        { prop: 'keyword', label: '关键词名称：', type: 'input' }
      ],
      formData: {
        aliasName: '', // 别名名称
        keyword: '', // 关键词名称
      },
      tableInfo: {
        list: [],
        columns: [
          { title: '商品名称关键词', key: 'keyword' },
          { title: '提交人名称', key: 'submitUserName' },
          { title: '提交部门', key: 'submitOrgName' },
          { title: '提交时间', key: 'submitTime' },
        ],
        loading: false,
        selection: []
      },
      pagination: {
        nowPage: 1,
        totalNum: 0,
        pageShow: 10
      },
      pageSizes: [10, 20, 30, 40],
      inputReason: {
        visible: false,
        loading: false, // 审核通过和不通过按钮loading
      },
    }
  },
  mounted () {
    this.loadInitDataInMounted();
  },
  computed: {
    ...mapGetters('permissions/systemBtns', ['showBtn']),
  },
  methods: {
    // 表格勾选为空
    isEmptyForSelection () {
      return this.tableInfo.selection.length === 0;
    },
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      if (this.showBtn('审核')) {
        return (<div class="table-action">
          <el-button type="text" onClick={() => this.handleAudit(row)}>审核</el-button>
        </div>);
      }
    },
    // 在mounted时期加载初始数据
    loadInitDataInMounted () {
      this.handleQueryForm();
    },
    // 获取表单内容
    getFormData (data) {
      this.formData = data;
    },
    // 获取表格数据 by 查询表单
    async getTableDataBySearchForm () {
      sessionStorage.setItem('buttonId', getBtnsId('查询'));
      const { nowPage, pageShow } = this.pagination;
      const retData = await requestToData({
        url: '/sysback/product/keyword/audit/listAudit',
        type: 'post',
        data: { nowPage, pageShow, ...this.formData },
      }, () => { this.tableInfo.loading = true }, () => { this.tableInfo.loading = false });
      if (retData) {
        this.tableInfo.list = retData?.results || [];
        this.pagination.totalNum = retData?.totalNum || 0;
      }
    },
    // 表单查询
    handleQueryForm () {
      this.pagination.nowPage = 1;
      this.getTableDataBySearchForm();
    },
    // 页码切换
    handlePageChange (val) {
      this.pagination.nowPage = val;
      this.getTableDataBySearchForm();
    },
    // 每页条数切换
    handlePageSizeChange (val) {
      this.pagination.pageShow = val;
      this.getTableDataBySearchForm();
    },
    // 表格勾选
    handleTableSelection (list) {
      this.tableInfo.selection = list;
    },
    // 批量审核
    handleBatchAudit () {
      this.inputReason.visible = true;
    },
    // 审核
    handleAudit (row) {
      this.$router.push({
        name: 'aliasToAudit',
        query: { type: 'audit', auditKeywordUuid: row.auditKeywordUuid }
      });
    },
    // 批量审核通过
    async handleSuccessedByBatchAudit (reason) {
      this.batchAuditByType({ root: 'batchAuditPass', reason }, '1');
    },
    // 批量审核不通过
    handleFailedByBatchAudit (reason) {
      if (!reason) {
        return this.$message.warning('审核不通过意见不能为空');
      }
      this.batchAuditByType({ root: 'batchAuditReject', reason }, '2');
    },
    /**
     * 批量操作 by 审核状态
     * @param {root} 请求URL的根节点
     * @param {reason} 请求入参-提交原因
     * @param {type} 请求类型-1：审核通过；2：审核不通过
    */
    async batchAuditByType ({ root, reason }, type) {
      const successMsg = type === '1' ? '批量审核通过成功' : '批量审核不通过成功';
      const retStatus = await requestToStatus({
        url: `/sysback/product/keyword/audit/${root}`,
        type: 'post',
        data: {
          auditKeywordUuids: getListByReturnMapKey(this.tableInfo.selection, 'auditKeywordUuid'),
          reason
        }
      }, () => { this.inputReason.loading = true },
      () => { this.inputReason.loading = false });
      if (retStatus) {
        this.$message.success(successMsg);
        this.inputReason.visible = false;
        this.getTableDataBySearchForm();
      }
    },
  }
}
</script>
